<template>
  <div class="app-container">
    <el-input v-model="search" placeholder="搜索田块" />
    <div class="cardList">
      <div
        v-for="(item, i) of list"
        :key="i"
        class="card"
        @click="
          show = true
          card = item
        "
      >
        <el-image :src="`/api/v2/public/getImage?id=${item.images[0]}`" style="width: 160px;" fit="cover">
          <div slot="error">
            <el-image :src="require('./farm.jpeg')" />
          </div>
        </el-image>
        <div class="info">
          <div>田块名称: {{ item.field_name }}</div>
          <div>田块面积: {{ item.field_area }}</div>
          <div>田块GPS: {{ item.field_gps }}</div>
        </div>
      </div>
    </div>
    <el-pagination
      :page-size.sync="page.size"
      :total="page.total"
      :current-page.sync="page.page"
      style="margin-top: 8px;"
      layout="total, prev, pager, next, sizes"
      @size-change="getFarm"
      @current-change="getFarm"
    />

    <el-dialog :visible.sync="show" width="1600px" :title="card && card.field_name">
      <el-image :src="`/api/v2/public/getImage?id=${card && card.images[0]}`" style="width: 160px;" fit="cover" />
      <el-tabs v-model="activeTab" @tab-click="onTabClick">
        <template v-if="card">
          <el-tab-pane v-for="(tab, i) of tabs" :key="i" :label="tab.label" :name="tab.id">
            <div>
              <div>田块名称: {{ card.field_name }}</div>
              <div>田块面积: {{ card.field_area }}</div>
              <div>田块GPS: {{ card.field_gps }}</div>
            </div>
            <div v-if="activeTab === tabs[1].id && card.otherInfo">
              <div>作物类型: {{ card.otherInfo.crop_type }}</div>
              <div>肥料总量: {{ card.otherInfo.fertilizer_total }}</div>
              <div>下次施肥时间 : {{ card.otherInfo.next_fertilizer_time }}</div>
              <div>下次施肥种类: {{ card.otherInfo.next_fertilizer_type }}</div>
              <div>下次施药时间: {{ card.otherInfo.next_spray_time }}</div>
              <div>下次施药种类: {{ card.otherInfo.next_spray_type }}</div>
              <div>下次施药时间: {{ card.otherInfo.next_harvest_time }}</div>
            </div>
            <div v-if="activeTab === tabs[2].id && card.otherInfo">
              <div>平整类型: {{ card.otherInfo.pingzheng_time }}</div>
              <div>平整时间: {{ card.otherInfo.pingzheng_type }}</div>
            </div>
            <div v-if="activeTab === tabs[3].id && card.otherInfo">
              <div>施药种类: {{ card.otherInfo.spray_type }}</div>
              <div>施药时间: {{ card.otherInfo.spray_time }}</div>
            </div>
            <div v-if="activeTab === tabs[4].id && card.otherInfo">
              <div>施肥种类: {{ card.otherInfo.fertilizer_type }}</div>
              <div>施肥时间 : {{ card.otherInfo.fertilizer_time }}</div>
            </div>
            <div v-if="activeTab === tabs[5].id && card.otherInfo">
              <div>摄像头编号: {{ card.otherInfo.camera_id }}</div>
              <div>摄像头状态: {{ card.otherInfo.camera_status }}</div>
              <div>摄像头接口地址: {{ card.otherInfo.camera_interface }}</div>
              <div>摄像头接口字段: {{ card.otherInfo.camera_field }}</div>
              <div>系统字段: {{ card.otherInfo.sys_field }}</div>
            </div>
            <div v-if="activeTab === tabs[6].id && card.otherInfo">
              <div>监测类型: {{ card.otherInfo.detect_type }}</div>
              <div>接口地址: {{ card.otherInfo.interface_address }}</div>
              <div>接口字段: {{ card.otherInfo.interface_address }}</div>
              <div>系统字段: {{ card.otherInfo.sys_field }}</div>
            </div>
            <div v-if="activeTab === tabs[7].id && card.otherInfo">
              <div>阶段类别: {{ card.otherInfo.stage_type }}</div>
              <div>月历区分: {{ card.otherInfo.month_type }}</div>
              <div>开始时间: {{ card.otherInfo.start_date }}</div>
              <div>结束时间: {{ card.otherInfo.end_date }}</div>
              <div>氮积累量: {{ card.otherInfo.danleiji }}</div>
              <div>备注: {{ card.otherInfo.remark }}</div>
            </div>
            <div v-if="activeTab === tabs[8].id && card.otherInfo">
              <div>阶段类别: {{ card.otherInfo.stage_type }}</div>
              <div>月历区分: {{ card.otherInfo.month_type }}</div>
              <div>开始时间: {{ card.otherInfo.start_date }}</div>
              <div>结束时间: {{ card.otherInfo.end_date }}</div>
              <div>指数: {{ card.otherInfo.zhishu }}</div>
              <div>备注: {{ card.otherInfo.remark }}</div>
            </div>
            <div v-if="activeTab === tabs[9].id && card.otherInfo">
              <div>阶段类别: {{ card.otherInfo.stage_type }}</div>
              <div>月历区分: {{ card.otherInfo.month_type }}</div>
              <div>开始时间: {{ card.otherInfo.start_date }}</div>
              <div>结束时间: {{ card.otherInfo.end_date }}</div>
              <div>肥料名称: {{ card.otherInfo.fertilizer_name }}</div>
              <div>氮积累量: {{ card.otherInfo.fertilizer_total }}</div>
              <div>备注: {{ card.otherInfo.remark }}</div>
            </div>
            <div v-if="activeTab === tabs[10].id && card.otherInfo">
              <div>阶段类别: {{ card.otherInfo.stage_type }}</div>
              <div>月历区分: {{ card.otherInfo.month_type }}</div>
              <div>开始时间: {{ card.otherInfo.start_date }}</div>
              <div>结束时间: {{ card.otherInfo.end_date }}</div>
              <div>计划收割时间: {{ card.otherInfo.plan_date }}</div>
              <div>备注: {{ card.otherInfo.remark }}</div>
            </div>
            <div v-if="activeTab === tabs[11].id && card.otherInfo">
              <div>阶段类别: {{ card.otherInfo.stage_type }}</div>
              <div>月历区分: {{ card.otherInfo.month_type }}</div>
              <div>开始时间: {{ card.otherInfo.start_date }}</div>
              <div>结束时间: {{ card.otherInfo.end_date }}</div>
              <div>指数: {{ card.otherInfo.zhishu }}</div>
              <div>备注: {{ card.otherInfo.remark }}</div>
            </div>
            <div v-if="activeTab === tabs[12].id && card.otherInfo">
              <div>阶段类别: {{ card.otherInfo.stage_type }}</div>
              <div>月历区分: {{ card.otherInfo.month_type }}</div>
              <div>开始时间: {{ card.otherInfo.start_date }}</div>
              <div>结束时间: {{ card.otherInfo.end_date }}</div>
              <div>指数: {{ card.otherInfo.zhishu }}</div>
              <div>备注: {{ card.otherInfo.remark }}</div>
            </div>
          </el-tab-pane>
        </template>
      </el-tabs>
    </el-dialog>
  </div>
</template>

<script>
/** 田块展示 */
import request from '@/utils/request'

export default {
  data() {
    return {
      page: {
        page: 1,
        size: 10,
        total: undefined
      },
      search: '',
      list: [],
      snapshot: [],
      show: false,
      card: undefined,
      activeTab: 'field',
      tabs: [
        { label: '田块信息', id: 'field' },
        { label: '田块现状', id: 'fieldInfo' },
        { label: '平整履历', id: 'fieldPingZheng' },
        { label: '田块施药履历', id: 'fieldSpray' },
        { label: '田块施肥履历', id: 'fieldFertilizer' },
        { label: '田块摄像头信息', id: 'fieldCamera' },
        { label: '田块监测接口', id: 'fieldDetect' },
        { label: '各阶段氮积累量', id: 'nongyiDanleiji' },
        { label: '各阶段叶面积指数', id: 'nongyiYemianji' },
        { label: '肥料施用方案', id: 'nongyiFertilizer' },
        { label: '产量预计', id: 'nongyiOutput' },
        { label: '各阶段冠层光谱指数', id: 'nongyiGuangpu' },
        { label: '各阶段累积生长度日', id: 'nongyiShengzhang' }
      ]
    }
  },
  watch: {
    search() {
      this.list = this.snapshot.filter(iter => {
        const regex = new RegExp(this.search, 'ig')
        return Object.entries(iter).some(([_, value]) => regex.test(value))
      })
      this.page.total = this.list.length
    }
  },
  created() {
    this.getFarm()
  },
  methods: {
    getFarm() {
      request('/api/v2/base/farm/field/list', { params: { page: this.page.page, size: this.page.size }}).then(
        ({ data }) => {
          this.page.total = data.total
          this.snapshot = this.list = data.list
        }
      )
    },
    onTabClick(ev) {
      this.activeTab = ev.name
      if (ev.name === this.tabs[0].id) return (this.card.otherInfo = null)
      request(`/api/v2/base/farm/${ev.name}/list`, { params: { page: 1, size: 1, eq_id: this.card.id }}).then(
        ({ data: { list }}) => {
          this.card.otherInfo = list[0]
          this.$forceUpdate()
        }
      )
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  width: 100%;
  .el-input {
    margin-bottom: 8px;
    width: 200px;
  }
  .cardList {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    .card {
      display: flex;
      flex-direction: column;
      align-items: center;
      border-radius: 8px;
      box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
      padding: 8px;
      cursor: pointer;
      img {
        object-fit: contain;
      }
      .info {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-top: 10px;
        color: #666;
        font-size: 14px;
        line-height: 1.6;
        div {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
  }

  >>> .el-dialog__body {
    display: flex;
    justify-content: space-between;
    padding: 20px;
    .el-tabs {
      margin: 0;
      line-height: 1.6;
      .el-tabs__item {
        padding: 0 10px;
      }
      .el-tab-pane {
        display: flex;
        > div {
          flex: 1;
        }
      }
    }
  }
}
</style>
